<template>
  <!-- # 进程管理 -->
  <div>
    <!-- ## 条件搜索 -->
    <el-row style="background-color: #FFFFFF;margin-top: 10px;">
      <el-form ref="searchData" :inline="true" :rules="rules" :model="searchData" class="demo-form-inline" style="margin-left: 25px;">
        <el-form-item label="主机名">
          <el-input v-model="searchData.hostName" placeholder="主机名" />
        </el-form-item>
        <el-form-item label="主机状态">
          <el-select v-model="searchData.state" placeholder="主机状态">
            <el-option label="正常" value="1" />
            <el-option label="下线" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-refresh" circle @click="handleRefresh" />
        </el-form-item>
      </el-form>
    </el-row>
    <!-- ## 数据 -->
    <div class="hosts_container">
      <el-table v-loading="loading" element-loading-text="正在加载中" :data="progressList" style="width: 99%" stripe>
        <el-table-column label="序号" width="80" type="index" align="center" />
        <el-table-column label="进程ID" width="100" align="center" prop="appPid" />
        <el-table-column label="主机名" width="180" align="center">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>主机名: {{ scope.row.hostName }}</p>
              <p>进程ID: {{ scope.row.appPid }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.hostName }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>

        <el-table-column label="进程名称" width="280" prop="appName" />

        <el-table-column label="进程状态" width="180" align="center">
          <template slot-scope="scope">
            <el-row v-if="scope.row.state == '1'"><el-tag type="success">正常</el-tag></el-row>
            <el-row v-if="scope.row.state == '2'"><el-tag type="info">下线</el-tag></el-row>
          </template>
        </el-table-column>

        <el-table-column label="内存使用率" width="150">
          <template slot-scope="scope">
            {{ scope.row.memPer }}%
          </template>
        </el-table-column>

        <el-table-column label="Cpu使用率" width="150">
          <template slot-scope="scope">
            {{ scope.row.cpuPer }}%
          </template>
        </el-table-column>

        <el-table-column label="创建日期" width="250">
          <template slot-scope="scope">
            <i class="el-icon-time" />
            <span style="margin-left: 10px">{{ formatDate(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <template v-slot:empty>
          <div style="height: 200px;">
            <img src="../../assets/nodata.png" width="150" style="margin: 30px;">
          </div>
        </template>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        :page-size="size"
        :current-page.sync="page"
        :page-sizes="[10, 15, 20, 25, 100]"
        layout="sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { getProgres } from '@/api/progress.js'
import { formatDate } from '@/utils/index.js'

export default {
  data() {
    return {
      progressList: [],
      searchData: {
        hostName: '',
        state: ''
      },
      rules: {
        checkAtLeastOne: [
          { validator: this.checkAtLeastOne, trigger: 'blur' }
        ]
      },
      total: 0,
      size: 10,
      page: 1,
      loading: true
    }
  },
  mounted() {
    this.getProgres()
  },
  methods: {
    formatDate,
    checkAtLeastOne(rule, value, callback) {
      const { hostName, state } = this.searchData
      if (!hostName && state === null) {
        callback(new Error('至少一个字段不能为空'))
      } else {
        callback()
      }
    },
    async handleRefresh() {
      this.loading = true
      this.searchData.hostName = ''
      this.searchData.state = ''
      await this.getProgres()
      this.loading = false
      this.size = 10
      this.page = 1
    },
    commonHandle(res) {
      this.progressList = res.records
      this.total = res.total
      this.size = res.size
      this.loading = false
    },
    async getProgres() {
      if (this.searchData.hostName === '' && this.searchData.state === '') {
        const res = await getProgres(this.page, this.size)
        this.commonHandle(res)
      } else if (this.searchData.hostName === '') {
        const reqData = {
          state: this.searchData.state
        }
        const res = await getProgres(this.page, this.size, reqData)
        this.commonHandle(res)
      } else if (this.searchData.state === '') {
        const reqData = {
          hostName: this.searchData.hostName
        }
        const res = await getProgres(this.page, this.size, reqData)
        this.commonHandle(res)
      } else {
        const res = await getProgres(this.page, this.size, '', this.searchData)
        this.commonHandle(res)
      }
    },
    // 分页-size
    handleSizeChange(size) {
      this.loading = true
      this.size = size
      this.page = 1
      this.getProgres()
    },
    // 分页-page
    handleCurrentChange(page) {
      this.loading = true
      this.page = page
      this.getProgres()
    },
    // 条件查询
    async handleSearch() {
      this.$refs.searchData.validate(async(valid) => {
        if (valid) {
          this.loading = true
          console.log('搜索', this.searchData)
          await this.getProgres()
        }
      })
    }
  }
}
</script>
<style scoped></style>
